<template>
	<!-- 登录 -->
	<!-- 10.31.67.21 -->
	<view class="mylog">
		<u-loading-page :loading="loading"></u-loading-page>
		<u-notify ref="uNotify"></u-notify>
		<u-icon v-if="!block" name="eye-fill" color="#C6C8CB" size="28" class="icon1" @click="icon_tab_show"></u-icon>
		<u-icon v-else name="eye-off" color="#C6C8CB" size="28" class="icon2" @click="icon_tab_block"></u-icon>
		<view>
			<u--input placeholder="请输入用户名" border="surround" v-model="user.username"
				style="width: 260px;height: 30px;margin-left: 16%;"></u--input>
		</view>
		<view v-if="!block">
			<u--input placeholder="请输入密码" border="surround" :password='true' v-model="user.password"
				style="width: 260px;height: 30px;margin-left: 16%;margin-top: 20px;"></u--input>
		</view>
		<view v-else>
			<u--input placeholder="请输入密码" border="surround" v-model="user.password"
				style="width: 260px;height: 30px;margin-left: 16%;margin-top: 20px;"></u--input>
		</view>
		<u-button type="success" text="登录" @click="login"
			style="width: 280px;height: 50px;margin-left: 16%;margin-top: 30px;"></u-button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				block: false,
				loading: false,
				user: {
					username: "",
					password: ""
				}
			};
		},
		methods: {
			//点击登录
			login() {
				// 非空校验
				if (this.user.username === '' && this.user.password === '') {
					this.$refs.uNotify.show({
						top: 10,
						type: 'error',
						color: '#fff',
						bgColor: '#FABEBE',
						message: '用户名密码不能为空',
						duration: 1000 * 3,
						fontSize: 20,
						safeAreaInsetTop: true
					})
				} else {
					uni.request({
						url: "http://10.31.67.21:8002/admin/loginuser",
						method: 'POST', // 请求方法，
						data: {
							username: this.user.username,
							pass: this.user.password
						},
						success: (res) => {
							// 请求成功，拿到返回的数据
							console.log(res);
							// 在这里对数据进行处理或展示
							this.$refs.uNotify.show({
								top: 10,
								type: 'success',
								color: '#fff',
								bgColor: '#5AC725',
								message: '登录成功',
								duration: 1000 * 3,
								fontSize: 20,
								safeAreaInsetTop: true
							})
							this.loading = true
							setTimeout(() => {
								uni.switchTab({
									url: '/pages/index/index'
								})
							}, 3000)
						},
						fail: (err) => {
							// 请求失败
							console.error(err);
						}
					})
				}
			},
			icon_tab_show() {
				this.block = true
			},
			icon_tab_block() {
				this.block = false
			}
		},
	}
</script>

<style>
	.mylog {
		width: 100%;
		height: 200px;
	}

	.icon1 {
		position: absolute;
		left: 300px;
		top: 287px;
		z-index: 999;
	}

	.icon2 {
		position: absolute;
		left: 300px;
		top: 287px;
		z-index: 999;
	}
</style>